<template>
  <div class="financialReport">
    <ul class="tab-ul">
      <li @click="tabnum = 1">
        <span>商户财务报表</span>
        <div v-show="tabnum == 1" class="line"></div>
      </li>
      <li @click="tabnum = 2">
        <span>团长财务报表</span>
        <div v-show="tabnum == 2" class="line"></div>
      </li>
    </ul>
    <ul class="header-ul" v-if="tabnum == 1">
      <li class="item">
        <p class="title">累计营业额（元）</p>
        <p class="num">{{ merchantsData.revenue }}</p>
      </li>
      <li class="item">
        <p class="title">未结算（元）</p>
        <p class="num">{{ merchantsData.beginMoney }}</p>
      </li>
      <li class="item">
        <p class="title">已结算（元）</p>
        <p class="num">{{ merchantsData.afterMoney }}</p>
      </li>
    </ul>
    <div class="search">
      <div class="search-inp-box">
        <div>
          <div class="item-box">
            <span class="search-text">订单编号</span>
            <input  v-model="orderNoValue"  type="text"  name=""  id=""  placeholder="请输入订单编号" />
          </div>
          <div class="item-box">
            <span class="search-text">日期</span>
            <el-date-picker v-if="tabnum == 1"
            v-model="dateVuale"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
           <el-date-picker v-else
            v-model="dateVuale"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
          </div>
        </div>
        <div>
          <div class="item-box" v-if="tabnum == 1">
            <span class="search-text">状态</span>
            <el-select  v-model="searchvalue2" placeholder="请选择">
              <el-option  v-for="item in searchoptions2"  :key="item.value"  :label="item.label"  :value="item.value"></el-option>
            </el-select>
            <!-- <el-select v-else v-model="searchvalue2" placeholder="请选择">
              <el-option  v-for="item in searchoptions1"  :key="item.value"  :label="item.label"  :value="item.value"></el-option>
            </el-select> -->
          </div>
        </div>
      </div>
      <div class="search-btn">
        <span class="my-btn" @click="searchClick" :class="colorBlue == 0?'my-back-blue':''" @mousemove="mouseMove(0)">筛选</span>
        <span class="btn" @click="emptyClick" :class="colorBlue == 1?'my-back-blue':''" @mousemove="mouseMove(1)">清空</span>
        <span class="btn" @click="exportClick" :class="colorBlue == 2?'my-back-blue':''" @mousemove="mouseMove(2)">导出</span>
      </div>
    </div>
    <div class="tab-one" v-if="merchantsData">
      <div
        style="
          margin-bottom: 20px;
          margin-right: 5px;
          color: #444;
          text-align: right;
        "
      >
        <span>今日累计收入{{merchantsData.revenue}}元</span>
      </div>
      <el-table v-if="tabnum == 1" :data="merchantsData.page.list"  stripe  border  style="width: 100%">
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column prop="orderNo" label="订单编号"></el-table-column>
        <el-table-column prop="shopName" label="商户名称"></el-table-column>
        <el-table-column prop="shopCode" label="商家编码"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column prop="priceNew" label="金额"></el-table-column>
        <el-table-column label="结算状态" width="80">
          <template slot-scope="scope">
            <span>{{scope.row.settleState==1?'已结算':'未结算'}}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-table  v-if="tabnum == 2"  :data="merchantsData.list"  stripe  border  style="width: 100%">
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column prop="orderNo" label="订单编号"></el-table-column>
        <el-table-column prop="siteName" label="自提点名称"></el-table-column>
        <el-table-column prop="sitePhone" label="自提点编号"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column prop="siteCommission" label="简分"></el-table-column>
        <el-table-column label="结算状态" width="80">
          <template slot-scope="scope">
            <span>{{scope.row.state==1?'已提现':'未提现'}}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination  v-if="tabnum == 1"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="merchantsData.page.total"
      ></el-pagination>
      <el-pagination v-if="tabnum == 2"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="merchantsData.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryParams: {
        state: undefined,//状态
        orderNo: undefined,//订单编号
        createTime: undefined,//日期
        siteName:undefined,//自提点名称
        productName: undefined,//商品名称
        receivePhone: undefined,//收货人手机号
        page: 1,
        pageSize: 5
      },
      colorBlue:0,
      source:'收入',//来源（暂时写死）
      // masknum: false, //弹窗
      // detailsData: "", //弹窗数据
      tabnum: 1, //控制tab切换
      orderNoValue: "", //订单编号
      searchvalue1: "", //来源选中值
      searchvalue2: "", //状态选中值
      dateVuale: "", //日期选中值
      searchoptions1: [
        //状态选择数据
        { label: "已提现", value: 1 },
        { label: "未提现", value: 0 },
      ],
      searchoptions2: [
        //状态选择数据
        { label: "已结算", value: 1 },
        { label: "未结算", value: 0 },
      ],
      merchantsData: "", //商户财务报表数据
      //分页
      currentPage4: 1, //跳转到第几页
      page: 1, //第几页
      pageSize: 5, //每页几条
    };
  },
  mounted() {
    this.getmerchantsData();
  },
  methods: {
    //切换按钮样式
    mouseMove(index) {
        this.colorBlue = index;
    },
    //获取商户财务报表数据
    getmerchantsData() {
      if (this.tabnum == 1) {
        var urlcode = "/finance/getAllFinance";
        var param = {
          page: this.page,
          pageSize: this.pageSize,
          settleState:this.searchvalue2,
          orderNo:this.orderNoValue,
          createTime: this.dateVuale[0],
          createTimeNew:this.dateVuale[1],
        };
      } else if(this.tabnum == 2) {
        var urlcode='/finance/getSiteFinance'
        var param = {
          page: this.page,
          pageSize: this.pageSize,
          state:this.searchvalue2,
          type:0,
          orderNo:this.orderNoValue,
          createTime: this.dateVuale,
          orderId:0,
        };
      }
      this.axios({
        url: urlcode,
        method: "post",
        data: JSON.stringify(param),
      }).then((res) => {
        this.merchantsData = res.data.data;
        console.log('this.merchantsData',this.merchantsData)
      });
    },
    //筛选
    searchClick() {
      this.getmerchantsData()
    },
    //清空
    emptyClick() {
      this.orderNoValue = "";
      this.searchvalue1 = "";
      this.searchvalue2 = "";
      this.dateVuale = "";
      this.getmerchantsData()
    },
    //导出
    exportClick() {
      this.emptyClick();
      if (this.tabnum == 1) {
        var urlcode = "/finance/getAllFinance";
        var param = {
          page: this.page,
          pageSize: this.pageSize,
          settleState:this.searchvalue2,
          orderNo:this.orderNoValue,
          createTime: this.dateVuale[0],
          createTimeNew:this.dateVuale[1],
        };
      } else if(this.tabnum == 2) {
        var urlcode='/finance/getSiteFinance'
        var param = {
          page: this.page,
          pageSize: this.pageSize,
          state:this.searchvalue2,
          type:0,
          orderNo:this.orderNoValue,
          createTime: this.dateVuale,
          orderId:0,
        };
      }
      // let { page,pageSize,...params } = param//后台不要分页，去掉
      this.axios({
          url: urlcode,
          method:'post',
          data: JSON.stringify(param),
      }).then(res=>{
        console.log(res.data.data)
          if(res.data.code == '') {
              this.$message({
                  /*导出数据量大时加提示，设置setTimeout延时 */
                  type: "info",
                  message: "正在导出，请稍候..."
              });
              setTimeout(() => {
                  import("../config/Export2Excel").then(excel => {
                    console.log(this.tabnum)
                      if (this.tabnum == 1) {
                        /* 设置Excel的表格第一行的标题 */
                        const tHeader = ["订单编号", "商家名称", "商家编码","创建时间", "金额","结算状态","0未结算,1已结算"];
                        /* filterValue里的值是tableData里对象的属性 */
                        const filterValue = ["orderNo", "shopName", "shopCode","createTime", "priceNew","settleState"]; /*导出列表的字段 */
                        let Data = res.data.data.page.list; /*请求接口返回导出数组 */
                        const list = Data;
                        console.log("list", Data);
                        const data = this.formatJson(filterValue, list);
                        excel.export_json_to_excel({
                            header: tHeader,
                            data,
                            filename: "商户财务报表"
                        });
                      } else if(this.tabnum == 2) {
                        /* 设置Excel的表格第一行的标题 */
                        const tHeader = ["订单编号", "自提点", "自提点编号","创建时间", "简分","结算状态","0未提现,1已提现"];
                        /* filterValue里的值是tableData里对象的属性 */
                        const filterValue = ["orderNo", "siteName", "sitePhone","createTime", "siteCommission","state"]; /*导出列表的字段 */
                        let Data = res.data.data.list; /*请求接口返回导出数组 */
                        const list = Data;
                        console.log("list", Data);
                        const data = this.formatJson(filterValue, list);
                        excel.export_json_to_excel({
                            header: tHeader,
                            data,
                            filename: "团长财务报表"
                        });
                      }
                  });
              }, 2000);
          }
      }) 
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    //分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getmerchantsData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getmerchantsData();
    },
  },
  watch: {
    tabnum() {
      this.getmerchantsData();
      this.emptyClick();
    },
  },
};
</script>

<style scoped>
/* 切换tab */
.tab-ul {
  margin-top: 7px;
  display: flex;
}
.tab-ul li {
  padding: 20px;
}
.tab-ul li .line {
  margin: 0 auto;
  width: 50px;
  margin-top: 14px;
  height: 2.5px;
  background: rgb(255, 136, 0);
}
/* 头部数据 */
.header-ul {
  padding: 10px 20px;
  display: flex;
  /* margin-top: 20px; */
}
.header-ul li {
  width: 260px;
  margin-right: 40px;
  padding: 20px;
  color: #fff;
  border-radius: 2px;
  overflow: hidden;
  background: url("../assets/img/index/bg-1.png");
  background-size: 100% 100%;
}
.header-ul li:nth-child(2) {
  background: url("../assets/img/index/bg-2.png");
  background-size: 100% 100%;
}
.header-ul li:nth-child(3) {
  background: url("../assets/img/index/bg-3.png");
  background-size: 100% 100%;
}
.header-ul .num {
  font-size: 28px;
  min-height: 40px;
  margin-top: 20px;
}
/* 搜索 */
.search {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  padding-top: 30px;
  margin-bottom: 20px;
}
.search-inp-box {
  display: flex;
  width: calc(100% - 220px);
  flex-wrap: wrap;
}
.item-box {
  margin: 8px 0;
}
.search-text {
  display: inline-block;
  width: 75px;
  text-align: right;
  padding-right: 15px;
  font-size: 15px;
  color: #555;
}
.search-btn {
  margin-top: 6px;
  width: 210px;
}
.search-btn span {
  font-size: 15px;
  display: inline-block;
  padding: 6px 14px;
  margin: 0 5px;
  border-radius: 2px;
  cursor: pointer;
}
.search-btn span:hover {
  color: #777;
}
.search-btn span:first-child:hover {
  color: #eee;
}
.btn {
  border: 1px solid #ddd;
}
</style>
<style scoped>
/* 遮罩层 */
.mask {
  width: 100vw;
  height: 100vh;
  /* color: #555; */
  background: rgba(51, 51, 51, 0.692);
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
}
.mask .content {
  width: 690px;
  height: 300px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 30px;
}
.mask .content-top {
  display: flex;
  justify-content: space-between;
  /* border-bottom: 1px solid #eee; */
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.mask .content-top img {
  width: 25px;
}
.content-text {
  padding-left: 10px;
}
.content-text-top {
  display: flex;
  align-items: center;
}
.content-text-top .top-l {
  display: flex;
  align-items: flex-end;
  margin-right: 80px;
}
.content-text-top .top-l .img-box {
  width: 40px;
  height: 40px;
  background: #eee;
  position: relative;
  margin-right: 12px;
}
.content-text-top .top-l .img-box img {
  width: 25px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.content-text-content {
  margin-top: 50px;
  padding-left: 55px;
}
.content-text-content .text-title {
  display: inline-block;
  width: 140px;
}
.content-text-content p {
  margin: 10px 0;
}
</style>
<style>
.search input {
  width: 190px;
}
.el-select {
  width: 190px;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 190px;
}
.el-table td > .cell,
.el-table th > .cell {
  text-align: center;
}
/* 分页 */
.el-pagination {
  margin-top: 30px;
}
</style>